<include file="public:header"/>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <title>微信支付样例-退款</title>
    <style type="text/css">
        .yisulayer {
            background: #323a45 !important;
        }
        .rechargeBox{
        	width: 1200px;
        	margin: 150px auto 20px;
        	border-left: 3px solid #FF6666;
        	font-size: 26px;
        	padding-left: 20px;
        }
        .rechargeTop{
        	width: 1200px;
        	margin: 10px auto 20px;
        	overflow: hidden;
        	background: #fff;
        	padding: 40px 20px;
        }
        .rechargeTop p{
        	font-size: 16px;
        }
        .fl{
        	float: left;
        }
        .paymoney{
        	width: 1200px;
        	margin: 10px auto 50px;
        	overflow: hidden;
        	background: #fff;
        }
        .paymoneyul{
        	width: 300px;
        	overflow: hidden;
        }
        .paymoneyul>li{
        	width: 50%;
        	float: left;
        	text-align: center;
        	height: 50px;
        	line-height: 50px;
        	font-size: 18px;
        }
        .paymoneyul>li:hover{
        	cursor: pointer;
        }
        .payTop{
        	width: 100%;
        	overflow: hidden;
        	background: #f6f9f9;
        }
        .paytable{
        	width: 1000px;
        	margin: 10px auto;
        	overflow: hidden;
        	border: 1px solid #f0f3f5;
        	border-collapse:separate;
        	border-spacing:0px;
        }
        .paytable tr{
        	height: 50px;
        	line-height: 50px;
        }
        .paytable tr th{
        	text-align: center;
    	    font-size: 14px;
		    color: #2d3137;
		    padding: 8px 0px;
		    background-color: #f0f3f5;
        }
        .paytable tr td{
    	    font-size: 16px;
		    color: #5e6e80;
		    text-align: center;
		    padding: 20px 0px 20px;
        }
        .payClist p.payP{
        	line-height: 86px;
		    font-size: 16px;
		    color: #FF6666;
        	width: 1000px;
        	margin: 0 auto;
        }
        .payClist{
        	width: 1200px;
        	margin: 30px auto 10px;
        	overflow: hidden;
        }
        .payClist p{
        	width: 150px;
        	text-align: center;
        	float: left;
        	font-size: 17px;
        	line-height: 50px;
        }
        .paystyle{
        	float: left;
        	overflow: hidden;
        }
        .paystyle li{
        	float: left;
        	width: 200px;
        	margin: 10px;
        	overflow: hidden;
        }
        .paydiv{
        	width: 100%;
        	overflow: hidden;
        }
        .paydiv img{
        	display: block;
        	width: 100%;
        }
        .paylj{
        	width: 100%;
        	overflow: hidden;
        	padding: 28px 0;
        	box-shadow: 0 -1px 10px #ccc;
        }
        .ljbtn{
        	display: block;
    	    width: 180px;
    	    text-align: center;
		    height: 46px;
		    line-height: 46px;
		    font-size: 18px;
		    color: #ffffff;
		    background-color: #FF6666;
		    border: 1px solid #FF6666;
		    -webkit-border-radius: 3px;
		    -moz-border-radius: 3px;
		    border-radius: 3px;
		    outline: none;
		    cursor: pointer;
		    margin-left: 62px;
		    vertical-align: top;
        }
        .backg{
        	background: #fff !important;
        }
        .main-content{
            width: 100%;
            padding-left: 150px;
        }
    </style>
</head>
<body style="background: #f0f3f5">
    <div class="main-content">
    <div class="rechargeBox">账户充值</div>
    <div class="rechargeTop">
    	<p class="fl" style="padding-left: 20px;">剩余金额：&nbsp;&nbsp;<span style="color: #FF6666;">{$list.money}</span>元</p>
    	<p class="fl" style="margin-left: 100px;">充值金额： <input id="moneys" placeholder="请输入的金额小数点最多只能是2位" style="height: 35px;line-height: 35px;width: 264px;text-indent: 10px;" type="text" onkeyup="clearNoNum(this)" onblur="clearNoNum(this)" value="{:I('get.money')}">元</p>
    </div>
    <div class="paymoney"> 
    	<div class="payTop">
	    	<ul class="paymoneyul">
	    		<li>在线支付</li>
	    		<li style="display: none;">线下汇款</li>
	    	</ul>
    	</div>
    	<div class="paycontent">
    		<div class="payClist">
    			<div style="overflow: hidden;padding: 0 0 20px;">
    			<p>支付平台：</p>
    			<ul class="paystyle">
    				<li id="1" class="checked">
    					<div class="paydiv">
    						<img src="images/alipays2.png">
    					</div>
    				</li>
    				<li id="2">
    					<div class="paydiv">
    						<img src="images/weixinpays1.png">
    					</div>
    				</li>
    			</ul>
    			</div>
    			<div class="paylj">
    				<span class="ljbtn" onclick="recharge()">立即充值</span>
    			</div>
    		</div>
    		<!-- 线下汇款 -->
    		<div class="payClist" style="display: none;">
    			<table class="paytable">
    				<tr>
	    				<th>开户银行</th>
	    				<th>银行账号</th>
	    				<th>开户名称</th>
    				</tr>
    				<tr>
    					<td>平安银行股份有限公司广州分行</td>
    					<td>1500 0089 4610 40</td>
    					<td>广州亿速云计算有限公司</td>
    				</tr>
    			</table>
    			<p class="payP">注：转账到上述银行账号后，需联系我司业务员或财务（联系电话：400 100 2938）确认入账。</p>
    		</div>
    	</div>
    </div>
</div>
<script src="layui/layui.js"></script>
    <script type="text/javascript">
    function recharge(){
        var moneys = $('#moneys').val();
        if(moneys == '' && moneys<=0){
             layui.use(['layer', 'form'], function(){
              var layer = layui.layer
              ,form = layui.form;     
               layer.alert('请填写您的充值金额')
            });
            
            return false;
        }
        var paystyle = $('.paystyle').find('.checked').attr('id');
        $.ajax({
            url: "{:U('home/recharge/recharge')}",
            type: 'post',
            dataType: 'json',
            data:{
                money: moneys
            },
            success: function(res){
                if(res.code == 1){
                    if(paystyle == 1){
                        // 支付宝支付
                        // window.location.href = 
                        window.location.href = "../alipay/index.php?orderid="+res.data+'&money='+moneys;
                    }else{
                        // 微信支付
                        window.location.href = "{:U('home/recharge/weipay')}&orderid="+res.data+'&money='+moneys;
                    }
                }else{
                    layui.use(['layer', 'form'], function(){
                      var layer = layui.layer
                      ,form = layui.form;     
                       layer.alert(res.msg)
                    });
                }
            }
        })
    }
   
    $('.paymoneyul>li').eq(0).addClass('backg');
    $('.paymoneyul>li').click(function(){
        var index = $(this).index();
        $(this).addClass('backg').siblings('li').removeClass('backg');
        $('.payClist').eq(index).show().siblings('.payClist').hide();
    })
    $('.paystyle>li').click(function(){
        var index = $(this).attr('id')-1;
        var imgarr = ['alipays1.png','weixinpays1.png'];
        var imgarr2 = ['alipays2.png','weixinpays2.png'];
        if(index == 0){
            $(this).addClass('checked');
            $(this).siblings('li').removeClass('checked');
            $(this).find('div>img').attr('src','images/'+imgarr2[0]);
            $(this).siblings('li').find('div>img').attr('src','images/'+imgarr[1]);
        }else if(index == 1){
            $(this).addClass('checked');
            $(this).siblings('li').removeClass('checked');
            $(this).find('div>img').attr('src','images/'+imgarr2[1]);
            $(this).siblings('li').find('div>img').attr('src','images/'+imgarr[0]);
        }
    })

    $('#moneys').blur(function(){
        var val = $(this).val();
        if(val<=0){
            layui.use(['layer', 'form'], function(){
              var layer = layui.layer
              ,form = layui.form;     
               layer.alert('输入的金额不能低于零的数，请重新输入')
            });
            $(this).val('')
        }
        
    })
    

    // 输入框最多只能输入2位小数
    function clearNoNum(obj){
        //先把非数字的都替换掉，除了数字和.
        obj.value = obj.value.replace(/[^\d.]/g,"");
        //保证只有出现一个.而没有多个.
        obj.value = obj.value.replace(/\.{2,}/g,".");
        //必须保证第一个为数字而不是.
        obj.value = obj.value.replace(/^\./g,"");
        //保证.只出现一次，而不能出现两次以上
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        //只能输入两个小数
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
        }
</script>

<script src="../js/jquery.min.js" type="text/javascript"></script>
</body>
</html>
<include file="public:footer"/>
